<template>
    <div class="pageWrapper">
        <SearchBar @onSearch="handleSearch" @childFn="resetForm">
            <SearchBarItem label="主订单号：" :labelLg="8">
                <Input
                    type="text"
                    v-model="dataModule.orderId"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="子订单号：" :labelLg="8">
                <Input
                    type="text"
                    v-model="dataModule.subOrderId"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="源子订单号：" :labelLg="8">
                <Input
                    type="text"
                    v-model="dataModule.originalSubOrderId"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="商户名称：" :labelLg="8">
                <Input
                    type="text"
                    v-model="dataModule.merchantName"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="商品名称：" :labelLg="8">
                <Input
                    type="text"
                    v-model="dataModule.productName"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="业务场景：" :labelLg="8">
                <Select
                    v-model="dataModule.orderSource"
                    placeholder="请选择"
                    :clearable="isClear"
                >
                    <Option
                        :value="item.key"
                        v-for="(item, key) in businessList"
                        :key="key"
                        >{{ item.value }}</Option
                    >
                </Select>
            </SearchBarItem>
            <SearchBarItem label="子订单状态：" :labelLg="8">
                <Select
                    v-model="dataModule.subOrderStatus"
                    placeholder="请选择"
                    :clearable="isClear"
                >
                    <Option
                        :value="item.key"
                        v-for="(item, key) in stateList"
                        :key="key"
                        >{{ item.value }}</Option
                    >
                </Select>
            </SearchBarItem>
            <SearchBarItem label="子订单创建时间：" :labelLg="8">
                <DatePicker
                    type="daterange"
                    ref="createDatePicker"
                    split-panels
                    transfer
                    placeholder="请选择"
                    @on-change="createTime"
                ></DatePicker>
            </SearchBarItem>
            <SearchBarItem label="核销时间：" :labelLg="8">
                <DatePicker
                    type="daterange"
                    ref="createDatePicker"
                    split-panels
                    transfer
                    placeholder="请选择"
                    @on-change="verificationTime"
                ></DatePicker>
            </SearchBarItem>
            <SearchBarItem label="核销状态：" :labelLg="8">
                <Select
                    v-model="dataModule.verificationStatus"
                    placeholder="请选择"
                    :clearable="isClear"
                >
                    <!-- <Option value="IG" key="IG" >核销中</Option> -->
                    <Option value="SC" key="SC" >核销成功</Option>
                    <Option value="FL" key="FL" >核销失败</Option>
                </Select>
            </SearchBarItem>
        </SearchBar>
        <RemoteTable :namespace="namespace" :columns="columns" @onSortChange="onSortChange">
          <template #extra>
            <Authc permissions="trade:order:childOrder:export">
              <Button :loading="exportLoading" type="primary" icon="ios-download-outline" @click="exportExcel">导出</Button>
            </Authc>
          </template>
        </RemoteTable>
    </div>
</template>

<script>
import {
    Button,
    Input,
    Modal,
    Message,
    Col,
    Row,
    Form,
    FormItem,
    DatePicker,
    Select,
    Option,
    Card
} from "view-design";
import RemoteTable from "@/components/RemoteTable";
import SearchBar from "@/components/SearchBar";
import RemoteSelect from "@/components/RemoteSelect";
import { namespace } from "../module/childModule";
import Authc from "@/components/Authc";
import Action from "./Action";
import util from "@/utils/util";

export default {
    name: "tables_page",
    components: {
        RemoteTable,
        SearchBar,
        SearchBarItem: SearchBar.SearchBarItem,
        RemoteSelect,
        Authc,
        Action,
        Button,
        Input,
        Modal,
        Message,
        Col,
        Row,
        Form,
        FormItem,
        DatePicker,
        Select,
        Option,
        Card
    },
    data() {
        return {
            requireUrl: "",
            namespace: namespace,
            isClear: true,
            loading: true,
            modal1: false,
            exportLoading: false,
            dataModule: {},
            businessList: [], //业务场景
            stateList: [], //子订单状态
            tableData: [],
            columns: [
                {
                    type: "index",
                    title: "序号",
                    minWidth: 80,
                    align: "center"
                    // fixed: "left"
                },
                {
                    title: "主订单号",
                    key: "orderId",
                    minWidth: 180,
                    align: "center"
                    // fixed: "left"
                },
                {
                    title: "子订单号",
                    key: "subOrderId",
                    align: "center",
                    minWidth: 180
                },
                {
                    title: "源子订单号",
                    key: "originalSubOrderId",
                    align: "center",
                    minWidth: 180
                },
                {
                    title: "业务场景",
                    key: "orderSourceCN",
                    align: "center",
                    minWidth: 100
                },
                {
                    title: "商户名称",
                    key: "merchantName",
                    align: "center",
                    minWidth: 150
                },
                {
                    title: "商品名称",
                    key: "productName",
                    align: "center",
                    minWidth: 100
                },
                {
                    title: "子订单状态",
                    align: "center",
                    key: "subOrderStatusCN",
                    minWidth: 150
                },
                {
                    title: "应收金额(元)",
                    align: "center",
                    key: "subOrderAmount",
                    minWidth: 150,
                    render: (h, params) => {
                        let item = params.row.subOrderAmount / 100;
                        return h('span', util.toMoney(item));
                    }
                },
                {
                    title: "实付金额(元)",
                    key: "payAmount",
                    align: "center",
                    minWidth: 150,
                    render: (h, params) => {
                        let item = params.row.payAmount / 100;
                        return h('span', util.toMoney(item));
                    }
                },
                {
                    title: "优惠总金额(元)",
                    key: "discount",
                    align: "center",
                    minWidth: 150,
                    render: (h, params) => {
                        let item = params.row.discount / 100
                        return h('span', util.toMoney(item));
                    }
                },
                {
                    title: "成本价格(元)",
                    key: "productCost",
                    align: "center",
                    minWidth: 100,
                    render: (h, params) => {
                        let cost=params.row.productCost||0
                        let item = cost / 100;
                        return h('span', util.toMoney(item));
                    }
                },
                {
                    title: "子订单创建时间",
                    key: "createdDt",
                    align: "center",
                    minWidth: 150
                },
                {
                    title: "核销状态",
                    key: "verificationStatus",
                    align: "center",
                    minWidth: 100,
                    render: (h, params) => {
                        let item = params.row.verificationStatus
                        let spanText=""
                        if(item &&item==='IG'){
                            spanText='核销中'
                        }else if(item &&item==='SC'){
                            spanText='核销成功'
                        }else if(item &&item==='FL'){
                            spanText='核销失败'
                        }
                        return h('span', spanText);
                    }
                },
                {
                    title: "子订单核销时间",
                    key: "verificationTime",
                    align: "center",
                    minWidth: 150
                },
                {
                    title: "操作",
                    key: "action",
                    align: "center",
                    permissions: ["trade:order:childOrder"],
                    minWidth: 121,
                    // fixed: "right",
                    render: function(h, data) {
                        return h(Action, {
                            props: {
                                row: data.row
                            }
                        });
                    }
                }
                // {
                //   title: '操作',
                //   key: 'handle',
                //   width: 140,
                //   options: ['delete', 'check', 'edit'],
                //   buttons: [
                //     (h, params, vm) => {
                //       return this.dealBtnsOPeration(h, params, vm)
                //     }
                //   ]
                // }
            ]
        };
    },
    created() {
        /**
         * 如果 url 没有带参数，就重置请求参数
         * 有就添加到 vuex
         * **/
        let urlOrderId = util.getUrlParam('orderId');
        if ( urlOrderId ) {
            this.$store.commit(`${namespace}/setQuery`, {
                orderId: urlOrderId
            });
            this.$set(this.dataModule, 'orderId', urlOrderId);
        } else {
            this.$store.commit(`${namespace}/reviseQuery`);

        }
        this.getSelect();
    },
    methods: {
        handleSearch() {
            let pageSize = {
                currentPage: 1,
                pageSize: 10
            };
            this.$store.dispatch(`${namespace}/query`, {
                ...this.dataModule,
                ...pageSize
            });
        },
        onSortChange(sort) {
            if (sort.order === "normal") {
                this.queryParam.order = [];
            } else {
                this.queryParam.order = [sort.key + " " + sort.order];
            }
            this.handleSearch();
        },
        // 清空事件；
        resetForm() {
            /** data 里面没有显示声明的，就得用 this.$set 动态修改对应的值 **/
            this.$set(this.dataModule, "orderId", "");
            this.$set(this.dataModule, "subOrderId", "");
            this.$set(this.dataModule, "originalSubOrderId", "");
            this.$set(this.dataModule, "merchantName", "");
            this.$set(this.dataModule, "productName", "");
            this.$set(this.dataModule, "orderSource", "");
            this.$set(this.dataModule, "subOrderStatus", "");
            this.$set(this.dataModule, "verificationStatus", "");
            // 清空时间选择
            this.$refs["createDatePicker"].handleClear();
        },
        //查询数据字典
        getSelect() {
            this.$store.dispatch(`${namespace}/getSearchKey`).then(res => {
                if (res.data.errorCode === 0) {
                    let data = res.data.data;
                    this.businessList = data.orderSource; // 业务来源
                    this.stateList = data.subOrderStatus; //订单状态
                }
            });
        },
        // 下单时间
        createTime(date, type) {
            this.dataModule.createTimeBegin = date ? date[0] : "";
            this.dataModule.createTimeEnd = date ? date[1] : "";
        },
        // 核销时间
        verificationTime(date, type) {
            this.dataModule.verification_time_begin = date ? date[0] : "";
            this.dataModule.verification_time_end = date ? date[1] : "";
        },
        async exportExcel() {
          if(!this.dataModule.createTimeBegin||!this.dataModule.createTimeEnd){
            this.$Message.error({
              content: '请选则订单创建时间'
            })
            return
          }
            this.$data.exportLoading = true;
            try {
                let res = await this.$store.dispatch(`${namespace}/exportExcel`, this.dataModule);
                util.exportExcle(res, '子订单明细表');
            } catch (error) {
                this.$Message.error({
                content: '导出失败'
                })
            } finally {
                this.$data.exportLoading = false;
            }
        }
    },
    mounted() {}
};
</script>

<style></style>
